<!--
 * @Descripttion: 
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-10-30 15:14:32
-->
<template>
    <div>
        <div id="mychart5_next" style="height: 380px;width:100%; "></div>
    </div>
</template>

<script>
var common = require('../../../../../static/tool.js');
import { mainfun } from "../../../../../../assets/js/main.js";
export default {
    data() {
        return {
            url: common.url,
            str1: [],//日期
            str2: [],//上岗人才数
            str3: [],//新增上岗人才数
            str4: [],//人才总数
        };
    },
    props:['demanddatas'],
    watch: {
        demanddatas(newName, oldName) {
            this.demanddatas = newName;
            this.getdata();
        },
    },
    created() {
        //数据请求
        // this.getdata();
    },
    methods: {
        getdata(){
            // 先重置数据
            this.str1 = [];
            this.str2 = [];
            this.str3 = [];
            this.str4 = [];

            //赋值
            this.demanddatas.forEach(element => {
                this.str1.push(element.month.toString().substr(4,2)+"月")//月
                this.str2.push(mainfun.filterNumber(element.task_finish_day))//日均订单数
                this.str3.push(mainfun.filterNumber(element.avg_task_finish))//完成任务数/7/下单店铺数
                this.str4.push(mainfun.filterNumber(element.task_finish))//完成任务数
            });
            this.init(); //初始化
        },
        init() {
            let mychart5_next = this.$echarts.init(
                document.getElementById("mychart5_next")
            );

            var that = this;

            mychart5_next.setOption({
				
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#999",
                        },
                    },
                },
                toolbox: {
                    feature: {},
                },
                legend: {
                    data: ["求和项：日均订单数", "求和项：商户日均订单数", "求和项：订单总数"],
                },
                xAxis: [
                    {
                        type: "category",
                        data: that.str1,
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: "value", 
                        axisLabel: {
                            formatter: "{value}",
                        },
                    },
                ],
                series: [
                    {
                        name: "求和项：日均订单数",
                        type: "bar",
                        data: that.str2,
                        color: '#699bd0',
                    },
                    {
                        name: "求和项：商户日均订单数",
                        type: "line",
                        yAxisIndex: 1,
                        data: that.str3,
                        color: '#df8244',
                    },
                    {
                        name: "求和项：订单总数",
                        type: "line",
                        yAxisIndex: 1,
                        data: that.str4,
                        color: '#ed544a',
                    },
                ],
            });
        },
    },
};
</script>

<style scoped>
</style>



// WEBPACK FOOTER //
// src/components/sheet/shop/next/echartstwonext.vue